<template>
  <div>
    <el-form-item label="发送群聊">
      <BaseForm class="searchForm" ref="searchForm" type="search" :items="formItems" v-model:form="searchParams"
        @search="handleSearch">
      </BaseForm>
    </el-form-item>
    <div style="text-align: right; font-size: 13px">
      待审核：
      <span style="color: #02a7f0">{{ conutTotal.auditNum }}&emsp;</span>
      审核通过：
      <span style="color: #70b603">{{ conutTotal.auditPassNum }}&emsp;</span>
      审核驳回：
      <span style="color: #d9001b">{{ conutTotal.auditNoPassNum }}&emsp;</span>
      待执行：
      <span style="color: #02a7f0">{{ conutTotal.toBeExecutedNum }}&emsp;</span>
      已执行：
      <span style="color: #70b603">{{ conutTotal.executedNum }}&emsp;</span>
      已取消：
      <span style="color: #aaaaaa">{{ conutTotal.executeCanalNum }}&emsp;</span>
      已发送：
      <span style="color: #70b603">{{ conutTotal.sentNum }}&emsp;</span>
      未发送：
      <span style="color: #aaaaaa">{{ conutTotal.unSentNum }}&emsp;</span>
    </div>
    <BaseTable ref="baseTable" class="baseTable" :getTableDataFn="contentManagementService.relationPageGroupList"
      :searchParams="searchParams" size="small" :serial="true" max-height="300px">
      <template #batchBtn>
        <el-button style="margin-top: 10px" @click="handleExamine(null)">
          审核
        </el-button>
      </template>
      <template #select>
        <el-table-column type="selection" width="55" :selectable="selectable" />
      </template>
      <el-table-column prop="groupId" label="微信群ID" minWidth="90" />
      <el-table-column prop="wxGroupName" label="微信群名称" minWidth="170" />
      <el-table-column prop="managerName" label="关联网格经理" minWidth="170">
        <template #default="scope">
          <Tooltip :text="scope.row.groupManagerDtoList
            ?.map((e) => e.managerName)
            ?.join('、') || ''
            "></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="communityDtoList" label="关联片区/村社" minWidth="170">
        <template #default="scope">
          <Tooltip :text="scope.row.communityDtoList
            ?.map((e) => e.communityName)
            ?.join('、') || ''
            "></Tooltip>
        </template>
      </el-table-column>


      <el-table-column prop="monthSort" label="本月任务序号" minWidth="110" />
      <el-table-column prop="auditStatus" label="审核状态" width="100">
        <template #default="scope">
          <AuditStatusName :status="scope.row.auditStatus"></AuditStatusName>
        </template>
      </el-table-column>
      <el-table-column prop="executeStatus" label="执行状态" width="100">
        <template #default="scope">
          <ExecuteStatus :status="scope.row.executeStatus"></ExecuteStatus>
        </template>
      </el-table-column>
      <el-table-column prop="sendStatus" label="发送状态" width="100">
        <template #default="scope">
          <SendStatusName :status="scope.row.sendStatus"></SendStatusName>
        </template>
      </el-table-column>
      <el-table-column prop="auditUserName" label="审核人" minWidth="170">
        <template #default="scope">
          {{ scope.row.auditUserName || '/' }}
        </template>
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间" minWidth="170">
        <template #default="scope">
          {{ scope.row.auditTime || '/' }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" minWidth="170">
        <template #default="scope">
          {{ scope.row.remark || '/' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="70">
        <template #default="scope">
          <el-link v-if="scope.row.auditStatus == 1" :underline="false" link type="primary" size="small"
            @click.prevent="handleExamine(scope.row)">审核</el-link>
          <span v-else>/</span>
        </template>
      </el-table-column>
    </BaseTable>
    <ExaminePop v-if="visibleEditForm" v-model:dialogVisible="visibleEditForm" :searchParams="searchParams" :item="item"
      :handleSearch="handleSearch"></ExaminePop>


  </div>
</template>

<script setup lang="ts">

import { contentManagementService } from '@/api/contentManagement'
import ExaminePop from './examinePop.vue'
const props = defineProps({
  tableData: {
    type: Array,
  },
  id: {
    type: String,
  },
})
const formItems = ref([
  {
    key: 'wxGroupName',
    type: 'input',
    placeholder: '请输入微信群名称',
  },
  {
    key: 'auditStatus',
    type: 'select',
    placeholder: '审核状态',
    options: [
      { label: '全部', value: '' },
      { label: '不需要审核', value: 0 },
      { label: '待审核', value: 1 },
      { label: '审核通过', value: 2 },
      { label: '审核不通过', value: 3 },
    ],
  },
  {
    key: 'executeStatus',
    type: 'select',
    placeholder: '执行状态',
    options: [
      { label: '全部', value: '' },
      { label: '待执行', value: 1 },
      { label: '已执行', value: 2 },
      { label: '已取消', value: 3 },
    ],
  },
  {
    key: 'sendStatus',
    type: 'select',
    placeholder: '发送状态',
    options: [
      { label: '全部', value: '' },
      { label: '已发送', value: 2 },
      { label: '未发送', value: 1 },
    ],
  },

])
const visibleCustomerList = ref(false)
const selectable = (row) => {
  return row.auditStatus == 1
}
const searchParams = ref({
  publishMessageId: props.id,
})
const baseTable = ref(null)
const handleSearch = () => {
  baseTable.value.handleSearch({
    ...searchParams.value,
    selecedList: undefined,
  })
  getCount()
}

const item = ref()
const visibleEditForm = ref(false)
const handleExamine = (row) => {
  let data = []
  if (row === null) {
    data = baseTable.value.multipleSelection
    if (data.length == 0) {
      ElMessage({
        message: '请至少选择一条数据',
        type: 'warning',
      })
      return
    }
  } else {
    data = [row]
  }
  item.value = data
  visibleEditForm.value = true
}
const conutTotal = ref({
  auditNum: '',
  auditPassNum: '',
  auditNoPassNum: '',
  toBeExecutedNum: '',
  executedNum: '',
  executeCanalNum: '',
  sentNum: '',
  unSentNum: '',
})
const getCount = () => {
  contentManagementService
    .relationWxGroupStatisticsResDto({
      data: { ...searchParams.value, selecedList: undefined },
    })
    .then((res) => {
      conutTotal.value = res.data
    })
}
const openPop = (row) => {
  item.value = { ...row }
  visibleCustomerList.value = true
}
onMounted(() => {
  getCount()
})
</script>

<style lang="scss" scoped>
@import './index.scss';

.searchForm {
  :deep(.el-form-item) {
    margin-bottom: 10px !important;
  }
}
</style>
